<template>
    <baseView>
        <div class="orderList">
            <DataTable class="rowClick" :tableColumn="tableColumn" @rowClick="onRowClick" :tableData="tableData"
                ref="tableRef">
                <!-- 查询 -->
                <template #search>
                    <div class="form-box">
                        <el-form :inline="true">
                            <el-form-item label="订单编号">
                                <el-input v-model="params.roadName" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="申请单位">
                                <el-input v-model="params.shopName" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="订单时间">
                                <el-date-picker v-model="params.date" type="date" />
                            </el-form-item>
                            <el-form-item label="垃圾类型">
                                <el-select v-model="params.type" placeholder="请选择" style="width: 120px;" clearable>
                                    <el-option v-for="item in rubbishOption" :key="item.value" :label="item.name"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="订单状态">
                                <el-select v-model="params.type" placeholder="请选择" style="width: 120px;" clearable>
                                    <el-option v-for="item in statusOption" :key="item.value" :label="item.name"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="searchTable">
                                    <el-icon style="margin-right: 2px;">
                                        <Search />
                                    </el-icon>查询
                                </el-button>
                                <el-button type="primary" plain>重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                </template>
                <!-- 订单状态 -->
                <template #状态="{ row }">
                    <div class="base-box" :class="typeObject[row['状态']]">
                        {{ row['状态'] }}
                    </div>
                </template>
            </DataTable>
        </div>
        <Dialog v-model:dialogShow="dialogShow" :title="rowData['店铺']" width="15%">

            <div class="dialog-content">
                <div>
                    订单编号：{{ rowData['编号'] }}
                </div>
                <div>
                    申请单位：{{ rowData['店铺'] }}
                </div>
                <div>
                    联系人：{{ rowData['编号'] }}
                </div>
                <div>
                    垃圾类型：{{ rowData['编号'] }}
                </div>
                <div>
                    垃圾数量：{{ rowData['编号'] }}
                </div>
                <div>
                    预约时间：{{ rowData['编号'] }}
                </div>
                <div>
                    订单时间：{{ rowData['time'] }}
                </div>
                <div>
                    订单状态：{{ rowData['编号'] }}
                </div>
                <div>
                    订单接收时间：{{ rowData['编号'] }}
                </div>
                <div>
                    订单完成时间：{{ rowData['编号'] }}
                </div>
                <div>
                    订单完成数量：{{ rowData['编号'] }}
                </div>
                <div>
                    清运车辆：{{ rowData['编号'] }}
                </div>
                <div>
                    作业人员：{{ rowData['编号'] }}
                </div>
            </div>
            <!-- <el-row :gutter="12">
                <el-col :span="12">订单编号：{{ rowData['编号'] }}</el-col> <el-col :span="12">申请单位：{{ rowData['编号']
                    }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">联系人：{{ rowData['编号'] }}</el-col> <el-col :span="12">垃圾类型：{{ rowData['编号'] }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">垃圾数量：{{ rowData['编号'] }}</el-col> <el-col :span="12">预约时间：{{ rowData['编号']
                    }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">订单时间：{{ rowData['编号'] }}</el-col> <el-col :span="12">订单状态：{{ rowData['编号']
                    }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">订单接收时间：{{ rowData['编号'] }}</el-col> <el-col :span="12">订单完成时间：{{ rowData['编号']
                    }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">订单完成数量：{{ rowData['编号'] }}</el-col> <el-col :span="12">清运车辆：{{ rowData['编号']
                    }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="12">作业人员：{{ rowData['编号'] }}</el-col>
            </el-row> -->
        </Dialog>
    </baseView>

</template>

<script setup>
import { orderList } from "@/api/orderInfo"
import dayjs from "dayjs"
const typeObject = {
    '未接单': 'noClean',
    '已接单': 'cleaning',
    '已收运': 'cleaned'
}
const tableColumn = ref([
    {
        label: '订单编号',
        prop: '编号',
    },
    {
        label: '申请单位',
        prop: '店铺',
    },
    {
        label: '垃圾类型',
        prop: '类型',
    },
    {
        label: '订单时间',
        prop: 'time',
        width: 200
    },
    {
        label: '订单状态',
        prop: '状态',
        slot: true
    },
])
const params = reactive({
    type: "",
    date: new Date()
})

const tableRef = ref(null)

const tableData = ref([])
const paginOption = reactive({
    pagenum: 1,
    pagesize: 10
})

function searchTable() {
    getOrderList()
}
const dialogShow = ref(false)
const rowData = ref({})
function onRowClick(row) {
    console.log("🚀 ~ onRowClick ~ row:", row)
    dialogShow.value = true;
    rowData.value = row
}


function getOrderList() {
    let reqParams = {
        type: '日',
        date: dayjs(params.date).format("YYYY-MM-DD")
    }
    orderList(Object.assign(reqParams, paginOption)).then(res => {
        if (res.code == 200) {
            tableData.value = res.data.list
            tableData.value.forEach((item) => {
                item.time = dayjs(params.date).format("YYYY-MM-DD hh:mm:ss")
            })
        }
    })
}

const rubbishOption = [
    {
        name: '干垃圾',
        value: 'dry'
    },
    {
        name: '湿垃圾',
        value: 'wet'
    },
    {
        name: '餐厨垃圾',
        value: 'food'
    }
]
const statusOption = [
    {
        name: '未接单',
        value: '0'
    },
    {
        name: '已接单',
        value: '1'
    },
    {
        name: '已收运',
        value: '2'
    }
]

onMounted(() => {
    getOrderList()
})

</script>

<style lang="scss" scoped>
.orderList {
    height: 100%;
    position: relative;
}

.form-box {
    display: flex;
    justify-content: flex-end;
}

.paginStyle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

}

.base-box {
    width: 54px;
    height: 28px;
    border-radius: 4px;
    margin: 0 auto;
}

.noClean {
    color: rgba(197, 207, 224, 1);
    background: rgba(197, 207, 224, 0.2);
}

.cleaning {
    color: rgba(255, 195, 0, 1);
    background: rgba(255, 195, 0, 0.2);
}

.cleaned {
    color: rgba(14, 204, 90, 1);
    background: rgba(208, 243, 222, 1);
}
</style>